'use client'

import { useRouter } from 'next/navigation'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { ArrowLeft, Home, ExternalLink } from 'lucide-react'

export default function TestNavigationPage() {
  const router = useRouter()

  const handleBackClick = () => {
    try {
      if (window.history.length > 1) {
        console.log('使用 router.back()')
        router.back()
      } else {
        console.log('历史记录不足，跳转到首页')
        router.push('/')
      }
    } catch (error) {
      console.error('路由跳转失败:', error)
      router.push('/')
    }
  }

  const testLinks = [
    {
      title: '配管专业参数页面',
      url: '/piping/parameters?code=C.18&name=表%20C.18&type=basic&deviceId=1&deviceName=装车泵',
      description: '测试配管专业的参数录入页面返回功能'
    },
    {
      title: '电气专业参数页面',
      url: '/electrical/parameters?code=C.18&name=表%20C.18&type=basic&deviceId=108&deviceName=测试设备',
      description: '测试电气专业的参数录入页面返回功能'
    },
    {
      title: '仪表专业参数页面',
      url: '/instrumentation/parameters?code=C.18&name=表%20C.18&type=basic&deviceId=IN-0001&deviceName=测试仪表',
      description: '测试仪表专业的参数录入页面返回功能'
    }
  ]

  return (
    <div className="container mx-auto py-6 space-y-6">
      <div>
        <h1 className="text-2xl font-bold mb-2">导航功能测试</h1>
        <p className="text-gray-600">测试各个页面的返回按钮功能</p>
      </div>

      {/* 返回按钮测试 */}
      <Card>
        <CardHeader>
          <CardTitle>返回按钮测试</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="flex items-center gap-4">
            <Button
              variant="outline"
              size="sm"
              onClick={handleBackClick}
            >
              <ArrowLeft className="h-4 w-4 mr-2" />
              测试返回功能
            </Button>
            
            <Button
              variant="outline"
              size="sm"
              onClick={() => router.push('/')}
            >
              <Home className="h-4 w-4 mr-2" />
              跳转到首页
            </Button>
          </div>
          
          <div className="text-sm text-gray-600">
            <p>当前历史记录长度: {typeof window !== 'undefined' ? window.history.length : '未知'}</p>
            <p>当前URL: {typeof window !== 'undefined' ? window.location.href : '未知'}</p>
          </div>
        </CardContent>
      </Card>

      {/* 测试链接 */}
      <Card>
        <CardHeader>
          <CardTitle>参数页面测试链接</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            {testLinks.map((link, index) => (
              <div key={index} className="border rounded-lg p-4">
                <div className="flex items-center justify-between">
                  <div className="flex-1">
                    <h3 className="font-medium">{link.title}</h3>
                    <p className="text-sm text-gray-600 mt-1">{link.description}</p>
                  </div>
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={() => router.push(link.url)}
                  >
                    <ExternalLink className="h-4 w-4 mr-2" />
                    访问页面
                  </Button>
                </div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>

      {/* 使用说明 */}
      <Card>
        <CardHeader>
          <CardTitle>测试说明</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-2 text-sm text-gray-600">
            <p>1. 点击上方的测试链接访问各个参数页面</p>
            <p>2. 在参数页面中点击"返回设备列表"按钮</p>
            <p>3. 检查是否能正确返回到对应的专业页面</p>
            <p>4. 如果浏览器历史记录不足，应该跳转到对应的专业首页</p>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
